rel="preload" as="style"

# 使用工具批量修改
npm i -D critical

Cache-Control: max-age=31536000

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap; # 告知浏览器，先展示系统字体，等自定义font加载完毕，在替换
}

<link rel="preload"> # 开启预加载

# 引入 fontfaceobserver
<script src="fontfaceobserver.js" type="text/javascript"></script>

# 根据css font-family设置
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

# 字体加载完毕，设置css
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  document.documentElement.className += " fonts-loaded"
});

# 更新css
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}